import {useRef, useState} from "react";
import ProTable, {ActionType} from "@ant-design/pro-table";
import {Form} from "antd";
import {getCommissionRecord} from "@/services/ant-design-pro/FinancialOperation";
import {PageContainer} from "@ant-design/pro-layout";
import ProCard from "@ant-design/pro-card";
import {ProFormDateTimeRangePicker, ProFormRadio} from "@ant-design/pro-form";
import CommissionDetailModal from "@/pages/Financial/commission/commissionRecord/components/CommissionDetailModal";

const Commission = () => {
	const [search, setSearch] = useState({})
	const [isShowCommission, setIsShowCommission] = useState(false)
	const [commissionId, setCommissionId] = useState(false)
	const actionRef = useRef<ActionType>();  // 搜索状态更新
	const columns = [
		{
			title: '昵称 /ID ',
			dataIndex: 'id',
			width: 280,
			render: (_, rouder) => {
				return (
					<div
						style={{fontSize: '14px'}}>
						Id :&nbsp;&nbsp;{rouder.id}&nbsp;&nbsp;
						昵称 : {rouder.user.nickname} &nbsp;&nbsp;
						姓名 : 未找到
					</div>
				)
			}
		},
		{
			title: '总佣金金额',
			dataIndex: 'total_amount',
			align: 'center',
			formItemProps: (form,config) => {
				return (
					<ProFormDateTimeRangePicker name="dateTimeRange" label="收到擦水电费擦万事芬达萨达擦拭法擦拭法擦拭防擦是否传是阿散发出把全文" />
				)
			}
		},
		{
			title: '账户余额',
			dataIndex: 'type',
			align: 'center',
			search:false,
			render: (_, rouder) => {
				return (
					<div>{rouder.user?.balance}</div>
				)
			}
		},
		{
			title: '账户佣金',
			dataIndex: 'account_amount',
			align: 'center',
			search:false,
		},
		{
			title: '提现到账佣金',
			dataIndex: 'withdrawal_amount',
			align: 'center',
			search: false

		},
		{
			title: '时间',
			align: 'center',
			dataIndex: 'created_at',
			search: false
		},
		{
			title: '操作',
			width: 150,
			align: 'center',
			fixed: 'right',
			search:false,
			render: (_, record,) =>
				[
					<a onClick={() => {
						setIsShowCommission(true)
						setCommissionId(record.id)
					}}>
						详情
					</a>
				],
		},
	];
	return (
		<PageContainer
			header={{title: '佣金记录', breadcrumb: {},}}
		>
			<ProCard>
				<Form
					onValuesChange={(value) => {
						switch (value.timeButton) {
							case '1':
								setSearch({
									...search,
									...{date: undefined}
								})
								break;
							case '2':
								setSearch({
									...search,
									...{data: 'yesterday'}
								})
								break;
							case '3':
								setSearch({
									...search,
									...{data: 'today'}
								})
								break;
							case '4':
								setSearch({
									...search,
									...{date: 'week'}
								})
								break;
							case '5':
								setSearch({
									...search,
									...{date: 'thirty'}
								})
								break;
							case '6':
								setSearch({
									...search,
									...{date: 'month'}
								})
								break;
							case '7':
								setSearch({
									...search,
									...{date: 'year'}
								})
								break;
						}
						actionRef.current?.reload()
					}}
				>
					<ProFormRadio.Group
						name="timeButton"
						label="时间选择"
						radioType="button"
						initialValue="1"
						options={[
							{
								label: '全部',
								value: '1',
							},
							{
								label: '昨天',
								value: '2',
							},
							{
								label: '今天',
								value: '3',
							},
							{
								label: '本周',
								value: '4',
							},
							{
								label: '本月',
								value: '5',
							},
							{
								label: '本季度',
								value: '6',
							},
							{
								label: '本年',
								value: '7',
							},
						]}
					/>
				</Form>
			</ProCard>
			<ProTable
				columns={columns}
				scroll={{x: 1400}}
				actionRef={actionRef}
				request={async (params = {}, sort, filter) => {
					let {data} = await getCommissionRecord({...params, ...sort, ...filter, ...search,})
					return {
						data,
						success: true
					}
				}}
				editable={{
					type: 'multiple',
				}}
				columnsState={{
					persistenceKey: 'pro-table-singe-demos',
					persistenceType: 'localStorage',
				}}
				rowKey="id"
				search={{
					labelWidth: 'auto',
					defaultCollapsed: false,
				}}
				// form={{
				// 	// 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
				// 	syncToUrl: (values, type) => {
				// 		if (type === 'get') {
				// 			return {
				// 				...values,
				// 				created_at: [values.startTime, values.endTime],
				// 			};
				// 		}
				// 		return values;
				// 	},
				// }}
				dateFormatter="string"
				headerTitle="充值记录列表"
			/>
			{isShowCommission ?
				<CommissionDetailModal visible={isShowCommission} setVisible={setIsShowCommission} id={commissionId}/>
				: null
			}
		</PageContainer>
	);
};

export default Commission;
